<template>
  <el-row class="tree-tool" style="width:100%">
    <!-- 左边 -->
    <el-col :span="12">{{ data.name }}</el-col>
    <!-- 右边 -->
    <el-col :span="12">
      <!-- flex 布局让内容靠右对齐 -->
      <el-row type="flex" justify="end">
        <span class="manager">{{ data.manager }}</span>
        <!--
          command：当我们点击菜单项的时候，会触发该事件。
         -->
        <!-- <el-dropdown @command="addDept"> -->
        <el-dropdown>
          <span class="el-dropdown-link">
            操作<i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <!--
               默认情况下 自定义组件时不能直接绑定原生事件的
              但是根据需求我们就是需要给按绑定事件，那怎么办？
              答：查文档

            如果我们就是想要在自定义组件上绑定原生js事件，能不能实现？
              答：可以
            怎么实现呢？
              答：vue专门提供了一个修饰符让我们能够直接在自定义组件上绑定原生js事件
              这个修饰符就是native修饰符
            -->
            <el-dropdown-item
              v-if="checkBtnPerm('add-department')"
              command="add"
              @click.native="addDept"
            >添加子部门</el-dropdown-item>
            <!-- 编辑和删除按钮只有渲染部门列表的时候需要渲染 -->
            <el-dropdown-item
              v-if="bool"
              v-show="checkBtnPerm('edit-department')"
              command="edit"
              @click.native="editDepts"
            >编辑部门</el-dropdown-item>
            <el-dropdown-item
              v-if="bool"
              v-show="checkBtnPerm('del-department')"
              command="del"
              @click.native="delDept"
            >删除部门</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-row>
    </el-col>
  </el-row>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      required: true
    },
    bool: {
      type: Boolean,
      default: false // 默认渲染公司 false表示渲染的是公司，true表示部门列表
    }
  },
  methods: {
    // 按钮操作权限判断函数
    // checkBtnPerm(code) {
    //   // code：值是我们在权限设置页面中为按钮设置好的标识符
    //   const roles = this.$store.state.user.userInfo.roles
    //   // console.log(roles.points)
    //   // 我们这里只需要判断，按钮的标识符是否存在在points数组即可
    //   // 存在说明有权限，返回true，否则返回false
    //   return roles && roles.points.includes(code)
    // },
    // 编辑部门
    editDepts() {
      this.$emit('editEvent', this.data)
    },
    // addDept(type) {
    //   // console.log('新增部门')
    //   console.log('触发了', type)
    //   // 怎么区分点击按钮类型？函数有一个回调参数，这参数的值是就是el-dropdown-item组件command属性的值
    //   // 那么我们就可以通过该参数来判断用户点击的按钮类型
    // }
    addDept() {
      console.log('新增部门')
      // 这里我们 把新增部门的逻辑统一写父组件中，因为如果写在这里的话，改组件局限性比较大，不利于复用
      // 又因为本身数据是在父组件中获取并渲染，所以我们直接在父组件中来实现新增功能的话，数据更加统一。
      // 也是有利于维护。
      // 子传父 通知父组件需要添加子部门之外，还是需要告诉父组件为谁添加子部门
      // 那怎么告诉父组件呢？答：只需要把当前部门对传回给父组件即可
      this.$emit('addEvent', this.data)
    },
    // 删除
    delDept() {
      this.$emit('delEvent', this.data)
    }
  }
}
</script>
<style scoped>
  .manager{
    margin-right: 20px;
  }
</style>
